<template>
    <l-layout style="background: #f1f2f5;" :left="240" >
        <template #left >
            <l-panel title="列字段" style="padding:8px 0 0 0;" >
                <el-tree @check="handleColumnsCheck"  default-expand-all show-checkbox ref="maintree" node-key="id" :highlight-current="true"  :data="columnsTree" >
                    <span class="lr-tree-node"  slot-scope="{ node }">
                        {{ node.label }}
                    </span>
                </el-tree>
            </l-panel>
        </template>
        <l-panel style="padding:8px 0 0 4px;">
            <template #toolLeft >
                 <div class="l-panel--item" size="mini">
                    <span style="width: 80px;" >排序字段</span>
                    <l-select size="mini" valueKey="prop" :options="columnsTree[0].children" v-model="config.table.sidx">
                    </l-select>
                </div>
                <div class="l-panel--item" size="mini">
                    <span style="width: 80px;" >是否倒序</span>
                    <el-switch v-model="config.table.isDESC">
                    </el-switch>
                </div>
            </template>
            <l-table
                :dataSource="config.table.columns"
                :columns="columns" 
                :isSortable="true"
                rowKey="id"
                :isShowNum="false"
                >
                <template v-slot:width="scope">
                    <el-input size="mini" v-model="scope.row.width" ></el-input>
                </template>
                <template v-slot:align="scope">
                    <el-select size="mini" v-model="scope.row.align">
                        <el-option
                        v-for="item in [{value:'left',label:'左'},{value:'center',label:'中'},{value:'right',label:'右'}]"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </l-table >
        </l-panel>
    </l-layout>
</template>
<script>
export default {
    name:'webcode-columns',
    inject: ["formConfig"],
    props:['columnsTree'],
    components:{
    },
    computed:{
        config(){
            return this.formConfig;
        }
    },
    data(){
        return {
            columns: [
                {label:'列名',prop:'label',minWidth:'150'},
                {label:'宽度',prop:'width',width:'120',align:"center"},
                {label:'对齐',prop:'align',width:'100',align:"center"}
            ]
        }
    },
    created () {
    },
    methods:{
        handleColumnsCheck($node,data){
            const addCols = data.checkedNodes.filter(t=>t.prop != undefined && this.config.table.columns.findIndex(t2=>t2.prop ==t.prop ) == -1)
            const removeCols = this.config.table.columns.filter(t=> data.checkedNodes.findIndex(t2=>t2.prop == t.prop) == -1)

            if(removeCols.length >0){
                this.config.table.columns = this.config.table.columns.filter(t=>removeCols.findIndex(t2=>t2.prop == t.prop) == -1)
            }
            
            if(addCols.length >0){
                this.config.table.columns.push(...addCols)
            }
            
        },
        setCheckedKeys(keys){
            this.$refs.maintree.setCheckedKeys(keys)
        }
    }

}
</script>
